<template>
  <div class="company">
    <h3 class="title">婚庆公司管理</h3>
    <el-button type="primary" @click="addCompanyHandle">添加公司</el-button>
    <el-form :inline="true" :model="compamyForm" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="compamyForm.username"
          placeholder="公司名称（可不填）"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="compamyForm.status" placeholder="账号状态">
          <el-option label="" value=""></el-option>
          <el-option label="正常" value="zhengchang"></el-option>
          <el-option label="禁用" value="jinyong"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="compamyForm.order">
          <el-option label="" value=""></el-option>
          <el-option label="订单量降序" value="orderdesc"></el-option>
          <el-option label="订单量升序" value="orderasc"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="companyData" border style="width: 100%">
      <el-table-column prop="cid" label="编号" width="50"> </el-table-column>
      <el-table-column prop="cname" label="公司名称" width="150">
      </el-table-column>
      <el-table-column prop="cphone" label="法人手机号" width="150">
      </el-table-column>
      <el-table-column prop="cmail" label="邮箱" width="200"> </el-table-column>
      <el-table-column prop="starttime" label="注册时间" width="200">
      </el-table-column>
      <el-table-column prop="cnum" label="订单量" width="50"> </el-table-column>
      <el-table-column prop="status" label="账号状态" width="80">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button @click="plannerList(scope.$index, scope.row)"
            >策划师列表</el-button
          >
          <el-button @click="changeStatus(scope.$index, scope.row)"
            >更换状态</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="添加账号"
      :visible.sync="dialogAddVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        :model="company"
        status-icon
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="公司名称" prop="companyname">
          <el-input type="text" v-model="company.companyname"></el-input>
        </el-form-item>
        <el-form-item label="法人姓名" prop="ceo">
          <el-input type="text" v-model="company.ceo"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="company.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="company.checkPass"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input type="text" v-model="company.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input type="text" v-model="company.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSure">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="账号管理"
      :visible.sync="dialogChangeVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>您确定审核通过该账号？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogChangeVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogChangeVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from "../../api";
export default {
  name: "WeddingAdmain",
  data() {
    return {
      compamyForm: {
        username: "",
        status: "",
        order: "",
      },
      companyData: [],
      dialogAddVisible: false,
      dialogChangeVisible: false,
      company: {
        companyname: "",
        ceo: "",
        password: "",
        checkPass: "",
        phone: "",
        email: "",
      },
    };
  },
  methods: {
    http() {
      api.selectCompany().then((res) => {
        if (res.status === 200) {
          for (let ele of res.data) {
            if (ele.status == 1) {
              ele.status = "正常";
            } else {
              ele.status = "禁用";
            }
          }

          this.companyData = res.data;
        }
      });
    },
    onSubmit() {
      api.selectCompany().then((res) => {
        if (res.status === 200) {
          for (let ele of res.data) {
            if (ele.status == 1) {
              ele.status = "正常";
            } else {
              ele.status = "禁用";
            }
          }

          //排序
          /**
         订单量降序  orderdesc
         订单量升序 orderasc
         
         */

          // console.log(this.compamyForm.order);
          switch (this.compamyForm.order) {
            case "orderdesc":
              // console.log('订单量降序');
              res.data.sort((ele1, ele2) => {
                return (ele1.cnum - ele2.cnum) * -1;
              });
              break;
            case "orderasc":
              // console.log('订单量升序');
              res.data.sort((ele1, ele2) => {
                return ele1.cnum - ele2.cnum;
              });
              break;
            default:
              break;
          }

          //判断状态
          res.data = this.accountStatus(res.data);

          //是否有公司名
          res.data = this.ifUsername(res.data);

          this.companyData = res.data;
        }
      });
    },
    //账号状态 status
    /**
     * 正常 zhengchang
     * 禁用 jinyong
     */
    accountStatus(arr) {
      //正常 zhengchang
      let newArr = [];
      if (this.compamyForm.status == "zhengchang") {
        for (let ele of arr) {
          if (ele.status == "正常") {
            newArr.push(ele);
          }
        }
      } else if (this.compamyForm.status == "jinyong") {
        for (let ele of arr) {
          if (ele.status == "禁用") {
            newArr.push(ele);
          }
        }
      } else {
        return arr;
      }
      return newArr;
    },
    //是否有名字 username
    ifUsername(arr) {
      if (this.compamyForm.username.trim() == "") {
        return arr;
      }
      let newArr = [];
      for (let ele of arr) {
        if (ele.cname == this.compamyForm.username) {
          newArr.push(ele);
        }
      }
      return newArr;
    },
    // 添加公司
    addCompanyHandle() {
      this.dialogAddVisible = true;
    },
    handleClose() {
      this.dialogAddVisible = false;
    },
    addSure() {
      api
        .addCompany({
          cpwd: this.company.password,
          cname: this.company.companyname,
          ceo: this.company.ceo,
          cphone: this.company.phone,
          cmail: this.company.email,
        })
        .then((res) => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
            });
            this.dialogAddVisible = false;
            this.http();
          }
        });
    },
    // 编辑
    handleEdit(index, row) {
      // console.log(row.cid);
      this.dialogAddVisible = true;
    },
    // 更换状态
    changeStatus() {
      this.dialogChangeVisible = true;
    },
    // 策划师列表
    plannerList(index, row) {
      this.$router.push({
        path: "/planner",
        query: {
          cid: row.cid,
          cname: row.cname,
        },
      });
    },
  },
  mounted() {
    this.http();
  },
};
</script>

<style lang="less" scoped>
.company {
  padding-left: 20px;
  .title {
    text-align: center;
    padding: 20px;
    background-color: #c4b4a9;
    margin-bottom: 10px;
  }
}
.demo-form-inline {
  margin: 20px 0 20px 20px;
}
</style>